<template>
  <div class="leftchild13">
    <header>
      <li>
        <router-link to="/"><span>工作台</span></router-link>
      </li>
      &nbsp;
      <li>/</li>
      &nbsp;
      <li>访问统计</li>
    </header>
    <main>
      <div class="top">
        <div class="top-top">
          <a-form
            :model="formState"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-item label="IP：">
              <a-input
                v-model:value="formState.ip"
                placeholder="请输入IP地址"
              />
            </a-form-item>

            <a-form-item label="UA:">
              <a-input
                v-model:value="formState.ua"
                type="textarea"
                placeholder="请输入User Agent"
              />
            </a-form-item>

            <a-form-item label="URL：">
              <a-input v-model:value="formState.url" placeholder="请输入URL" />
            </a-form-item>

            <a-form-item label="地址:">
              <a-input
                v-model:value="formState.address"
                type="textarea"
                placeholder="请输入地址"
              />
            </a-form-item>
          </a-form>
        </div>
        <div class="top-top">
          <a-form
            :model="formState"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-item label="浏览器：">
              <a-input
                v-model:value="formState.browser"
                placeholder="请输入浏览器"
              />
            </a-form-item>

            <a-form-item label="内核:">
              <a-input
                v-model:value="formState.core"
                type="textarea"
                placeholder="请输入内核"
              />
            </a-form-item>

            <a-form-item label="OS：">
              <a-input
                v-model:value="formState.os"
                placeholder="请输入操作系统"
              />
            </a-form-item>

            <a-form-item label="设备:">
              <a-input
                v-model:value="formState.equipment"
                type="textarea"
                placeholder="请输入设备"
              />
            </a-form-item>
          </a-form>
        </div>
        <div class="top-bottom">
          <div style="width: 240px">
            <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button type="primary" @click="onSubmit">搜索</a-button>
              <a-button style="margin-left: 10px" @click="resetting"
                >重置</a-button
              >
            </a-form-item>
          </div>
        </div>
      </div>
      <div class="middle">
        <div class="m-top">
          <div v-if="state.flag"><a-button danger>删除</a-button></div>
          <div v-if="!state.flag"></div>
          <a-popover>
            <template #content>
              <p color="#fff">刷新</p>
            </template>
            <a href=""><ReloadOutlined /></a>
          </a-popover>
        </div>
        <div class="m-middle">
          <a-table
            :columns="columns"
            :data-source="state.data"
            :scroll="{ x: 1300 }"
            :row-selection="rowSelection"
          >
            <template #action>
              <span style="color: #7790ff; cursor: pointer">
                <a-popconfirm
                  title="确认删除这个标签"
                  ok-text="确认"
                  cancel-text="取消"
                  @confirm="confirm"
                  @cancel="cancel"
                >
                  <a>删除</a>
                </a-popconfirm>
              </span>
            </template>
          </a-table>
        </div>
      </div>
    </main>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  reactive,
  toRaw,
  UnwrapRef,
  onMounted,
  ref
} from 'vue'
interface FormState {
  ip: string
  ua: string
  url: string
  address: string
  browser: string
  core: string
  os: string
  equipment: string
}
import { ReloadOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import axios from 'axios'
//表格
const columns = [
  {
    title: 'URL',
    width: 180,
    dataIndex: 'url',
    key: 'id',
    fixed: 'left'
  },
  { title: 'IP', dataIndex: 'ip', key: 'id' },
  { title: '浏览器', dataIndex: 'browser', key: 'id' },
  { title: '内核', dataIndex: 'engine', key: 'id' },
  { title: '操作系统', dataIndex: 'os', key: 'id' },
  { title: '设备', dataIndex: 'ipdevice', key: 'id' },
  { title: '地址', dataIndex: 'address', key: 'id' },
  { title: '访问量', dataIndex: 'count', key: 'id' },
  { title: '访问时间', dataIndex: 'updateAt', key: 'id' },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    width: 120,
    slots: { customRender: 'action' }
  }
]

interface DataItem {
  id: number
  name: string
  address: string
}

export default defineComponent({
  components: {
    ReloadOutlined
  },
  setup() {
    let state: any = reactive({
      data: [],
      flag: false
    })
    const rowSelection = {
      onChange: (
        selectedRowKeys: (string | number)[],
        selectedRows: DataItem[]
      ) => {
        if (selectedRows.length == 0) {
          state.flag = false
        } else {
          state.flag = true
        }
      },
      onSelect: (
        record: DataItem,
        selected: boolean,
        selectedRows: DataItem[]
      ) => {
        console.log(record, selected, selectedRows)
      },
      onSelectAll: (
        selected: boolean,
        selectedRows: DataItem[],
        changeRows: DataItem[]
      ) => {
        console.log(selected, selectedRows, changeRows)
      }
    }
    onMounted(() => {
      axios.post('https://creationapi.shbwyz.com/api/view').then((res) => {
        state.data.push(res.data.data)
        console.log(res.data.data)
      })
    })
    const formState: UnwrapRef<FormState> = reactive({
      ip: '',
      ua: '',
      url: '',
      address: '',
      browser: '',
      core: '',
      os: '',
      equipment: ''
    })
    const onSubmit = () => {
      console.log('submit!', toRaw(formState))
    }
    let resetting = () => {
      formState.ip = ''
      formState.ua = ''
      formState.url = ''
      formState.address = ''
      formState.browser = ''
      formState.core = ''
      formState.os = ''
      formState.equipment = ''
    }
    //表格
    const visible = ref<boolean>(false)
    const showModal = () => {
      visible.value = true
    }
    const handleOk = (e: MouseEvent) => {
      console.log(e)
      visible.value = false
    }
    const confirm = (e: MouseEvent) => {
      console.log(e)
      message.warning('访客无权进行该操作')
    }

    const cancel = (e: MouseEvent) => {
      console.log(e)
    }
    const value = ref<string>('')
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      formState,
      onSubmit,
      resetting,
      state,
      columns,
      rowSelection,
      showModal,
      visible,
      handleOk,
      confirm,
      cancel,
      value
    }
  }
})
</script>

<style lang="scss">
.leftchild13 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  header {
    height: 10%;
    padding-left: 10px;
    display: flex;
    align-items: center;
    background: #fff;
    border-top: 1px solid #eae2e2;

    li {
      cursor: pointer;
      color: #999;

      span {
        color: #999;
      }
    }
  }

  main {
    flex-grow: 1;
    overflow-y: scroll;

    .top {
      width: 97%;
      background: #fff;
      margin: 2% auto;
      padding-top: 20px;
      height: 180px;

      .top-top {
        height: 25%;
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        .ant-form {
          display: flex;
          justify-content: center;
          input {
            width: 200px;
            margin-left: 3px;
          }
          label {
            width: 100px;
            margin-left: 9px;
            display: flex;
            justify-content: flex-end;
          }
        }

        .ant-select-selector {
          width: 200px;
        }

        .ant-select {
          width: 200px;
        }

        .ant-select-arrow {
          float: right;
        }
      }

      .top-bottom {
        display: flex;
        justify-content: flex-end;
      }
    }

    .middle {
      width: 97%;
      height: 260px;
      background: #fff;
      margin: 3% auto;

      .m-top {
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 20px;
        cursor: pointer;
        button {
          margin-left: 10px;
        }
      }

      .m-middle {
        .li {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: orange;
          margin-right: 6px;
        }
      }
    }

    .btn2 {
      margin-left: 13px;
    }
  }
}

.ant-modal-mask {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.1);
}
</style>
